<!-- eslint-disable no-fallthrough -->
<script setup lang="tsx">
import { computed, h, onMounted, ref } from 'vue';
import type { VNode } from 'vue';
import { NAvatar, NButton, NSpace, NText } from 'naive-ui';
import { useAuthStore } from '@/store/modules/auth';
import { useRouterPush } from '@/hooks/common/router';
import { useSvgIcon } from '@/hooks/common/icon';
import { $t } from '@/locales';
import avatarPath from '@/assets/imgs/avatar.png';
import { useThemeStore } from '@/store/modules/theme';
import { fetchLogout } from '@/service/api/auth';
import { useBoolean } from '~/packages/hooks/src';
import AboutModal from './about.vue';
defineOptions({
  name: 'UserAvatar'
});

const themeStore = useThemeStore();

const avatarBg = ref(avatarPath);

const authStore = useAuthStore();
const { routerPushByKey, toLogin } = useRouterPush();
const { SvgIconVNode } = useSvgIcon();
const { bool: aboutVisible, setTrue: openAboutModal } = useBoolean();
function loginOrRegister() {
  toLogin();
}

type DropdownKey = 'user-center' | 'logout';

type DropdownOption =
  | {
      key: DropdownKey;
      label: string;
      icon?: () => VNode;
    }
  | {
      type: 'divider';
      key: string;
    }
  | {
      type: 'render';
      key: string;
      render: () => VNode;
    }
  | {
      key: string;
      label: string;
      icon?: () => VNode;
    };

function logout() {
  (window as any).$dialog?.info({
    title: $t('common.tip'),
    content: $t('common.logoutConfirm'),
    positiveText: $t('common.confirm'),
    negativeText: $t('common.cancel'),
    onPositiveClick: async () => {
      const { data } = await fetchLogout();
      (window as any).$message.success(data.msg);

      authStore.resetStore();
    }
  });
}

const themeText = ref('');
const updateThemeText = () => {
  switch (themeStore.themeScheme) {
    case 'dark':
      themeText.value = '夜间模式';
      break;
    case 'auto':
      themeText.value = '自动模式';
      break;
    case 'light':
      themeText.value = '亮色模式';
      break;
    default:
      break;
  }
};
const handleChangeTheme = () => {
  themeStore.toggleThemeScheme();
  updateThemeText();
};

onMounted(() => {
  updateThemeText();
});
</script>

<template>
  <NButton v-if="!authStore.isLogin" quaternary @click="loginOrRegister">
    {{ $t('page.login.common.loginOrRegister') }}
  </NButton>

  <NPopover
    v-else
    class="w-300px"
    trigger="click"
    :show-arrow="false"
    content-style="padding: 0;"
    header-style="padding: 0;"
    footer-style="p-5px"
  >
    <template #trigger>
      <div class="mr-12px">
        <ButtonIcon>
          <NAvatar round size="small" class="text-icon-large" :src="authStore.userInfo?.user?.avatar" />
          <span class="text-16px font-medium">{{ authStore.userInfo?.user?.userName }}</span>
        </ButtonIcon>
      </div>
    </template>
    <template #header>
      <div>
        <div class="avatar-header h-130px b-rd-lt-md b-rd-rt-md pb-20px pl-16px pr-16px pt-20px">
          <NSpace align="center" class="pb-15px">
            <NAvatar
              v-if="authStore.userInfo?.user.avatar !== ''"
              style="border: 2px solid white"
              round
              :size="45"
              :src="authStore.userInfo?.user?.avatar"
            />
            <NAvatar v-else round :size="45">
              {{ authStore.userInfo?.user?.userName.substring(0, 2).toUpperCase() }}
            </NAvatar>
            <NSpace vertical>
              <div class="text-16px">{{ authStore.userInfo?.user.userName }}</div>
              <NText class="text-14px" depth="3">{{ authStore.userInfo?.user.deptName }}</NText>
            </NSpace>
          </NSpace>
          <NText class="text-12px" depth="3">这个人很懒，什么也没有留下</NText>
        </div>
      </div>
    </template>
    <template #default>
      <div class="h-140px pb-10px pl-15px pr-15px pt-10px">
        <NSpace vertical size="large">
          <NSpace justify="space-between" class="w-100%">
            <div class="font-size-14px color-true-gray-500">公司</div>
            <div class="cursor-pointer font-size-14px">
              <NEllipsis class="m-w-200px">
                {{ authStore.userInfo?.company.companyName }}
              </NEllipsis>
            </div>
          </NSpace>
          <NSpace justify="space-between">
            <div class="font-size-14px color-true-gray-500">主题切换</div>
            <div
              class="flex cursor-pointer flex-justify-center flex-items-center font-size-14px"
              @click="handleChangeTheme"
            >
              <div class="mr-4px">{{ themeText }}</div>
              <SvgIcon icon="entypo:adjust" />
            </div>
          </NSpace>

          <NSpace justify="space-between">
            <div class="font-size-14px color-true-gray-500"></div>
            <div
              class="flex cursor-pointer flex-justify-center flex-items-center font-size-14px"
              @click="openAboutModal"
            >
              <div class="mr-4px">关于系统</div>
            </div>
          </NSpace>
        </NSpace>
      </div>
    </template>
    <template #footer>
      <NSpace justify="center">
        <NButton quaternary size="small" @click="routerPushByKey('user-center')">个人中心</NButton>
        <NButton quaternary size="small" @click="logout">退出登录</NButton>
      </NSpace>
    </template>
  </NPopover>

  <AboutModal v-model:visible="aboutVisible" />
</template>

<style scoped>
.avatar-header {
  width: 100%;
  background: linear-gradient(-40deg, hsla(0, 0%, 100%, 0.52) 4%, hsla(0, 0%, 100%, 0)), url('@/assets/imgs/avatar.png');
  background-color: rgb(var(--nprogress-color));
}
</style>
